<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CK 提取工具</title>
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <link rel="stylesheet" href="common.css">
    <script>
        // 防止主题闪烁 - 在页面渲染前应用主题
        (function() {
            const theme = localStorage.getItem('global-theme') || 'dark';
            if (theme === 'dark') {
                document.documentElement.classList.add('dark-theme');
            }
        })();
    </script>
    <link rel="stylesheet" href="ck-extractor.css">
</head>

<body>
    <div style="display: flex; height: 100vh;">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>工具库</h2>
                <button class="theme-toggle-btn" id="globalThemeToggle" title="切换主题" aria-label="切换浅色/深色主题">
                    <span class="theme-icon">🌓</span>
                </button>
            </div>
            <div class="sidebar-item" onclick="location.href='index.html'">JSON 格式化</div>
            <div class="sidebar-item" onclick="location.href='json-comparator.html'">JSON 对比</div>
            <div class="sidebar-item" onclick="location.href='text-comparator.html'">文本对比</div>
            <div class="sidebar-item" onclick="location.href='url-codec.html'">URL 编解码</div>
            <div class="sidebar-item" onclick="location.href='text-decoder.html'">文本解码</div>
            <div class="sidebar-item" onclick="location.href='datetime-converter.html'">日期时间转换</div>
            <div class="sidebar-item" onclick="location.href='md5-hash.html'">加解密</div>
            <div class="sidebar-item active" onclick="location.href='ck-extractor.html'">CK 提取</div>
            <div style="margin-top: auto; padding: 15px 20px; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border-color); text-align: center;">
                版本: v1.0.0
            </div>
        </div>
        <div class="main-content" style="overflow: auto; background: var(--bg-secondary);">
            <div class="ck-container">
                <div class="ck-header">
                    <h1>🔑 CK 提取工具</h1>
                    <p>从 HTTP 请求头中提取指定字段</p>
                </div>

                <!-- 请求头输入区域 -->
                <div class="input-section">
                    <label>请求头信息 <span class="format-hint">(支持 HTTP 请求头 / cURL 格式)</span></label>
                    <textarea id="headers"
                        placeholder="在这里粘贴请求头信息或 cURL 命令...&#10;&#10;支持格式：&#10;1. HTTP 请求头 (GET/POST)&#10;2. cURL 命令 (curl 'https://...' -H 'header: value' ...)&#10;3. 批量处理 (使用 ---分隔线--- 分隔多个请求)"></textarea>
                </div>

                <!-- 字段配置区域 -->
                <div class="config-section">
                    <div class="config-row">
                        <div class="config-item" style="flex: 2;">
                            <label>提取字段 (用 # 分隔)</label>
                            <div class="field-input-group">
                                <input type="text" id="ck"
                                    placeholder="例如: device#brand#model#osversion#Authorization#ssaid#store"
                                    value="device#brand#model#osversion#Authorization#ssaid#store">
                                <div class="dropdown">
                                    <button class="dropdown-btn">▼</button>
                                    <div class="dropdown-content" id="fieldTemplates">
                                        <!-- 模板选项将动态加载 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="config-item">
                            <label>变量名</label>
                            <input type="text" id="variableName" placeholder="输入变量名" maxlength="10">
                        </div>
                        <div class="config-item">
                            <label>备注名</label>
                            <input type="text" id="remarkName" placeholder="输入备注名" maxlength="20">
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="button-group">
                    <button class="btn-primary" onclick="extractCK()">提取</button>
                    <button class="btn-secondary" onclick="addTemplate()">添加模板</button>
                    <button class="btn-secondary" onclick="clearAll()">清空</button>
                </div>

                <!-- 结果显示区域 -->
                <div class="result-section">
                    <div class="result-header">
                        <label>提取结果</label>
                        <div class="result-actions">
                            <button class="btn-secondary" id="copyButton" onclick="copyResult()"
                                style="display:none;">复制结果</button>
                            <button class="btn-secondary" id="sendToQinglongButton" onclick="showQinglongDialog()"
                                style="display:none;">传送到青龙</button>
                        </div>
                    </div>
                    <div class="result-content" id="result"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 青龙配置对话框 -->
    <div class="modal" id="qinglongModal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>青龙面板配置</h2>
                <button class="modal-close" onclick="closeQinglongDialog()">×</button>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <label>青龙地址</label>
                    <input type="text" id="qinglongHost" placeholder="http://your-qinglong-host:5700">
                </div>
                <div class="input-group">
                    <label>Client ID</label>
                    <input type="text" id="qinglongClient" placeholder="输入 Client ID">
                </div>
                <div class="input-group">
                    <label>Client Secret</label>
                    <input type="text" id="qinglongSecret" placeholder="输入 Client Secret">
                </div>
                <div class="input-group">
                    <label>备注名</label>
                    <input type="text" id="qinglongUserName" placeholder="wx备注,没有模板就项目名+wx备注">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-secondary" onclick="closeQinglongDialog()">取消</button>
                <button class="btn-primary" onclick="sendToQinglong()">发送</button>
            </div>
        </div>
    </div>

    <script src="theme-toggle.js"></script>
    <script src="ck-extractor.js"></script>
</body>

</html>